<template>
  <div class="details container">
      <router-link to="/" class="btn btn-default">返回上一级</router-link>
    <h1 class="page-header">
        {{customer.name}}
        <span class="pull-right">
            <router-link class="btn btn-primary" :to="'/edit/'+customer.id">
                 编辑
            </router-link>
            <button class="btn btn-danger" @click="deleteCus(customer.id)">
                删除
            </button>
        </span>
    </h1>
    <ul class="list-group">
        <li class="list-group-item"><span class="glyphicon glyphicon-signal">
            {{customer.phone}}
        </span></li>
        <li class="list-group-item"><span class="glyphicon glyphicon-briefcase">
            {{customer.email}}
        </span></li>
         <li class="list-group-item"><span class="glyphicon glyphicon-education">
            {{customer.age}}
        </span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'details',
  data () {
    return {
    customer:""
    }
  },
  methods:{
       fetchCus(id){
          this.$http.get("http://localhost:3000/users/"+id)
          .then(function(response){
              console.log(response)
            this.customer = response.body;
          })
      },
      deleteCus(id){
        //   console.log(id);
         this.$http.delete("http://localhost:3000/users/"+id)
         .then(function(respnse){
             this.$router.push({path:"/",query:{alert:"用户删除成功！"}});
         })
      }
  },
   created(){
      this.fetchCus(this.$route.params.id);

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
